<script setup lang='ts'>
import { ref, onMounted, reactive, onUnmounted } from "vue";
import echartCommon from "/@/components/commonEchart/echartCommon.vue"
import fetchData from "./components/echartsOptions"
import { useRouter } from "vue-router"
const { gasCylinderMGT, safetyMGTCockpitData } = fetchData();
import { getAreaDrawApi } from "/@/api/sms/sms";
import VideoPlayer from '/@/components/player/VideoPlayer/index.vue';
import controlledDrawArea from "/@/views/sms/component/controlledDrawArea.vue"
import { getCameraListApi } from "/@/api/sms/sms";
import { sysDictDataList } from "/@/api/centerControl/oms";
//应急演练切换事件
const selectLiBg = ref(1);
const emergencyDrillList: any = ref([])
const selectEmergencyDrill = (item: any, id: number) => {
    emergencyDrillList.value = []
    selectLiBg.value = id
    emergencyDrillList.value = item
}

//视频播放
const videoPlayerShow = ref(false);
const videoOptions = reactive({
    src: '',
    myKey: '',
    v_Name: ''
})
const videoPlay = (item: any) => {
    videoOptions.myKey = item.n_Id
    videoOptions.src = item.v_MediaUrl
    videoOptions.v_Name = item.v_Name
    videoPlayerShow.value = true
}
let pageInfo = reactive({
    pageSize: 16,
    pageNo: 1
})
let timeId: any
const getCameraList = async () => {
    const res = await getCameraListApi(pageInfo)
    cameraListData.value = res.data.rows
    const totalNum = res.data.totalRows //总条数
    const totalPage = Math.ceil(totalNum / pageInfo.pageSize) // 总页数
    clearInterval(timeId)
    timeId = setInterval(() => {
        console.log(pageInfo.pageNo, "刷新");
        if (pageInfo.pageNo === totalPage) {
            getCameraListApi(pageInfo).then(res => {
                cameraListData.value = res.data.rows
            })
            pageInfo.pageNo = 1
        } else {
            getCameraListApi(pageInfo).then(res => {
                cameraListData.value = res.data.rows
            })
            pageInfo.pageNo++
        }
    }, 1000 * 60 * 3)
}

//页面跳转
const router = useRouter();
const jumpPage = (item: any) => {
    if (selectLiBg.value === 1 || selectLiBg.value === 2 || selectLiBg.value === 5) {
        router.push({
            path: '/sms/EmergencyManagement/meetFile'
        })
    } else if (selectLiBg.value === 3) {
        router.push({
            path: '/sms/EmergencyManagement/DrillPlan'
        })
    } else if (selectLiBg.value === 4) {
        router.push({
            path: '/sms/EmergencyManagement/EmergencyExercise'
        })
    }
}
const jumpPageTwo = (type: string) => {
    switch (type) {
        case 'risk1':
            router.push({
                path: '/sms/DoubleControl/RiskZoning'
            })
            break;
        case 'risk2':
            router.push({
                path: '/sms/DoubleControl/RiskPoint'
            })
            break;
        case 'risk3':
            router.push({
                path: '/sms/DoubleControl/RiskControl'
            })
            break;
        case 'notification':
            router.push({
                path: '/sms/TwoSinglesThreeCards/ReferenceCard'
            })
            break;
        case 'danger':
            router.push({
                path: '/sms/RectifyManage/RectifyRecord'
            })
            break;

        case 'job':
            router.push({
                path: '/sms/OperationProcess/JobCreat'
            })
            break;

        default:
            break;
    }
}
const areaDrawData = ref([]);
const areaDrawInfo = ref()
const areaDrawShow = ref(false)
const cameraListData = ref([])
const isCamera = ref(false)
onMounted(async () => {
    clearInterval(timeId)
    const res2 = await sysDictDataList({ TypeCode: 'ipConfig' });
    const host = window.location.host
    isCamera.value = res2.data.some(item => {
        return item.value === host
    })
    if (isCamera.value) {
        await getCameraList()
    }
    console.log(isCamera.value, "ip");
    const res = await getAreaDrawApi()
    res.data.forEach((item: any) => {
        if (item.v_Coordinates != null) {
            areaDrawData.value.push(item)
        }
    });
    const items: any = []
    res.data.forEach((item: any) => {
        if (item.v_Coordinates != null) {
            areaDrawShow.value = true;
            // const i = JSON.parse(item);
            items.push(item)
        }
    })
    areaDrawInfo.value = JSON.stringify(items[0])
    setTimeout(() => {
        selectEmergencyDrill(safetyMGTCockpitData.value.drFileResourceSurveyss, 1)
    }, 1000)


})

onUnmounted(() => {
    clearInterval(timeId)
})
</script>
<template>
    <el-row class="containerSafety" justify="space-evenly">
        <el-col :span="6" class="left">
            <el-row class="leftContainer">
                <el-col class="leftOne ">
                    <div class="herderIcon">
                        <span></span>
                        <span>风险辨识预警</span>
                        <span></span>
                    </div>
                    <ul class="leftOneCard">
                        <li class="leftOneCardItem" @click="jumpPageTwo('risk1')" style="cursor: pointer;">
                            <i></i>
                            <p class="leftOneCardItemInfo">
                                <span>未辨识</span>
                                <span>重大危险源</span>
                                <span>{{ safetyMGTCockpitData.n_GreatDangerSourceCount }}</span>
                            </p>
                        </li>
                        <li class="leftOneCardItem" @click="jumpPageTwo('risk2')" style="cursor: pointer;">
                            <i></i>
                            <p class="leftOneCardItemInfo">
                                <span>未辨识</span>
                                <span>风险分析单元</span>
                                <span>{{ safetyMGTCockpitData.n_GreatDangerAnalysisUnitCount }}</span>
                            </p>
                        </li>
                        <li class="leftOneCardItem" @click="jumpPageTwo('risk3')" style="cursor: pointer;">
                            <i></i>
                            <p class="leftOneCardItemInfo">
                                <span>未辨识</span>
                                <span>风险清单</span>
                                <span>{{ safetyMGTCockpitData.n_UnPlanControlDCListCount }}</span>
                            </p>
                        </li>
                    </ul>
                </el-col>
                <el-col class="leftTwo">
                    <div class="herderIcon">
                        <span></span>
                        <span>风险分析单元</span>
                        <span></span>
                    </div>
                    <div class="leftTwoContent">
                        <div class="leftTwoContentTop">
                            <ul class="leftTwoInfo" @click="jumpPageTwo('risk2')" style="cursor: pointer;">
                                <li>
                                    <span>分析单元</span>
                                    <span>{{ safetyMGTCockpitData.n_AnalysisUnitAllCount }}</span>
                                </li>
                                <li>
                                    <span>设备类</span>
                                    <span>{{ safetyMGTCockpitData.n_AnalysisUnitMachineCount }}</span>
                                </li>
                                <li>
                                    <span>作业活动类</span>
                                    <span>{{ safetyMGTCockpitData.n_AnalysisUnitJobActivityCount }}</span>
                                </li>
                                <li>
                                    <span>管理类</span>
                                    <span>{{ safetyMGTCockpitData.n_AnalysisUnitManagementCount }}</span>
                                </li>
                            </ul>
                            <p class="leftTwoName"> <span></span><span>风险等级</span> </p>
                        </div>
                        <ul class="leftTwoBottom">
                            <li>
                                <p class="leftTwoRiskIcon"></p>
                                <div class="leftTwoRiskInfo">
                                    <p class="leftTwoRiskInfoName">
                                        <span>重大风险</span>
                                        <span class="num">{{ safetyMGTCockpitData.n_AnalysisUnitGreatCount }}</span>
                                    </p>
                                    <p class="leftTwoRiskPercent">
                                        <el-progress :percentage="safetyMGTCockpitData.n_AnalysisUnitGreatCount"
                                            color="rgb(255, 95, 51)">
                                        </el-progress>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <p class="leftTwoRiskIcon"></p>
                                <div class="leftTwoRiskInfo">
                                    <p class="leftTwoRiskInfoName">
                                        <span>较大风险</span>
                                        <span class="num">{{ safetyMGTCockpitData.n_AnalysisUnitLargerCount }}</span>
                                    </p>
                                    <p class="leftTwoRiskPercent">
                                        <el-progress :percentage="safetyMGTCockpitData.n_AnalysisUnitLargerCount"
                                            color="rgb(255, 187, 0)">
                                        </el-progress>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <p class="leftTwoRiskIcon"></p>
                                <div class="leftTwoRiskInfo">
                                    <p class="leftTwoRiskInfoName">
                                        <span>一般风险</span>
                                        <span class="num">{{ safetyMGTCockpitData.n_AnalysisUnitGeneralCount }}</span>
                                    </p>
                                    <p class="leftTwoRiskPercent">
                                        <el-progress :percentage="safetyMGTCockpitData.n_AnalysisUnitGeneralCount"
                                            color="rgb(255, 242, 0)">
                                        </el-progress>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <p class="leftTwoRiskIcon"></p>
                                <div class="leftTwoRiskInfo">
                                    <p class="leftTwoRiskInfoName">
                                        <span>低风险</span>
                                        <span class="num">{{ safetyMGTCockpitData.n_AnalysisUnitLowCount }}</span>
                                    </p>
                                    <p class="leftTwoRiskPercent">
                                        <el-progress :percentage="safetyMGTCockpitData.n_AnalysisUnitLowCount"
                                            color="rgb(0, 255, 253)">
                                        </el-progress>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col class="leftThree">
                    <div class="herderIcon">
                        <span></span>
                        <span>每日安全承诺</span>
                        <span></span>
                    </div>
                    <div class="leftThreeContent" @click="jumpPageTwo('notification')" style="cursor: pointer;">
                        <p class="leftThreeStatus">
                        <ul>
                            <li class="leftThreeTitle">企业状态</li>
                            <li class="leftThreeCanter">{{ safetyMGTCockpitData.v_SafetyCommitmentSate }}</li>
                            <!-- <li class="liText">生产装置 <span>8套</span></li>
                            <li class="liText" style="color: rgb(255, 255, 255);">其中：运行4套，备用2套，检修0套</li>
                            <li class="liText">八大特殊作业</li>
                            <li class="liText">特殊作业 <span>0处</span></li>
                            <li class="liText">是否处于试生产 <span>否</span></li>
                            <li class="liText">生产装置 <span>否</span></li>
                            <li class="liText">生产装置 <span>是</span></li>
                            <li class="liText">主要负责人： <span>陈召航</span></li> -->
                        </ul>
                        </p>
                        <p class="leftThreePromise">
                        <ul>
                            <li class="leftThreeTitle">企业承诺</li>
                            <li class="leftThreePromiseText">{{ safetyMGTCockpitData.v_SafetyCommitment }}</li>
                        </ul>
                        </p>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="11" class="middle">
            <el-row class="middleContainer">
                <el-col class="middleOne">
                    <template v-if="!isCamera">
                        <controlledDrawArea :coordinatesArr="areaDrawData" :drawInfo="areaDrawInfo"
                            :isUseDialog="areaDrawShow">
                        </controlledDrawArea>
                        <div class="banTouch"></div>
                    </template>
                    <ul class="cameraList" v-else>
                        <li v-for="item in cameraListData" :key="item.n_Id" class="cameraListItem"
                            @click="videoPlay(item)">
                            <p class="image">
                            <p>
                                <i></i>
                            </p>
                            </p>
                        </li>
                    </ul>
                </el-col>
                <el-col class="middleTwo">
                    <ul class="middleTwoContent">
                        <li class="middleTwoPlan">
                            <div class="herderIcon">
                                <span></span>
                                <span>应急演练</span>
                                <span></span>
                            </div>
                            <div class="middleTwoPlanContent">
                                <ul class="middleTwoPlanList">
                                    <li @click="selectEmergencyDrill(safetyMGTCockpitData.drFileResourceSurveyss, 1)"
                                        :class="{ 'selectLi': selectLiBg === 1 }">应急资源调查</li>
                                    <li @click="selectEmergencyDrill(safetyMGTCockpitData.drFileRiskAssessments, 2)"
                                        :class="{ 'selectLi': selectLiBg === 2 }">应急风险评估</li>
                                    <li @click="selectEmergencyDrill(safetyMGTCockpitData.drPlans, 3)"
                                        :class="{ 'selectLi': selectLiBg === 3 }">应急演练计划</li>
                                    <li @click="selectEmergencyDrill(safetyMGTCockpitData.drRecords, 4)"
                                        :class="{ 'selectLi': selectLiBg === 4 }">应急演练记录</li>
                                    <li @click="selectEmergencyDrill(safetyMGTCockpitData.drFileAccidentInvestigations, 5)"
                                        :class="{ 'selectLi': selectLiBg === 5 }">事故应急调查</li>
                                </ul>
                                <p class="middleTwoPlanInfo">
                                <ul class="middleTwoPlanInfoList">
                                    <li v-for="(item, index) in emergencyDrillList" :key="item.id"
                                        @click="jumpPage(item)" class="middleTwoPlanInfoListItem">
                                        <span>{{ index + 1 }}</span>
                                        <span>{{ item.v_TypeName || item.v_Name }}</span>
                                        <span>{{ item.v_Describe || item.v_Mode }}</span>
                                    </li>
                                </ul>
                                </p>
                            </div>
                        </li>
                        <li class="middleTwoStatistics">
                            <div class="herderIcon">
                                <span></span>
                                <span>作业活动情况</span>
                                <span></span>
                            </div>
                            <div class="middleTwoStatisticsContent" @click="jumpPageTwo('job')"
                                style="cursor: pointer;">
                                <p class="middleTwoStatisticsBg">
                                    <i></i>
                                    <i></i>
                                    <i></i>
                                    <i>
                                        {{ safetyMGTCockpitData.n_IpTaskAllCount }}
                                    </i>
                                </p>
                                <ul class="middleTwoStatisticsList">
                                    <li>
                                        <span>{{ safetyMGTCockpitData.n_IpTaskTodoCount }}</span>
                                        <span>未开始</span>
                                    </li>
                                    <li>
                                        <span>{{ safetyMGTCockpitData.n_IpTaskDoingCount }}</span>
                                        <span>执行中</span>
                                    </li>
                                    <li>
                                        <span>{{ safetyMGTCockpitData.n_IpTaskCompletedCount }}</span>
                                        <span>已完成</span>
                                    </li>
                                    <li>
                                        <span>{{ safetyMGTCockpitData.n_IpTaskMissCount }}</span>
                                        <span>漏检</span>
                                    </li>
                                    <li>
                                        <span>{{ safetyMGTCockpitData.n_IpTaskCancelCount }}</span>
                                        <span>取消</span>
                                    </li>
                                    <li>
                                        <span>{{ safetyMGTCockpitData.n_IpTaskDraftCount }}</span>
                                        <span>待提交</span>
                                    </li>
                                </ul>
                                <p class="finishingRate">
                                    <el-progress type="circle"
                                        :percentage="safetyMGTCockpitData.f_IpTaskCompletedPercent">
                                        <template #default="{ f_IpTaskCompletedPercent }">
                                            <p class="percentage-value" style="font-size: 14px;font-weight: 700">{{
                                                f_IpTaskCompletedPercent || 0 }}%</p>
                                            <p class="percentage-label"
                                                style="color: rgba(255, 255, 255, 0.6);font-size: 10px;margin-top: 6px">
                                                任务完成率</p>
                                        </template>
                                    </el-progress>
                                </p>
                                <p class="loss">
                                    <el-progress type="circle" :percentage="safetyMGTCockpitData.f_IpTaskMissPercent">
                                        <template #default="{ f_IpTaskMissPercent }">
                                            <p class="percentage-value" style="font-size: 14px;font-weight: 700">{{
                                                f_IpTaskMissPercent || 0 }}%</p>
                                            <p class="percentage-label"
                                                style="color: rgba(255, 255, 255, 0.6);font-size: 10px;margin-top: 6px">
                                                漏检率</p>
                                        </template>
                                    </el-progress>
                                </p>
                            </div>
                        </li>
                    </ul>

                </el-col>
            </el-row>
        </el-col>
        <el-col :span="6" class="right">
            <el-row class="rightContainer">
                <el-col class="rightOne" :span="24">
                    <div class="herderIcon">
                        <span></span>
                        <span>气瓶安全管理</span>
                        <span></span>
                    </div>
                    <div class="rightOneContent">
                        <p class="rightOnePie">
                            <echartCommon :options="gasCylinderMGT" />
                        </p>
                        <p class="rightOneNum">
                        <p>消防系统</p>
                        <ul>
                            <li>
                                <span></span>
                                <span>探头数量</span>
                                <span style="color: rgb(255, 187, 0);">{{ safetyMGTCockpitData.n_FirefightingPointCount
                                    }}个</span>
                            </li>
                            <li>
                                <span></span>
                                <span>报警数</span>
                                <span style="color: rgb(255, 95, 51);">{{ safetyMGTCockpitData.n_FirefightingAlarmCount
                                    }}个</span>
                            </li>
                        </ul>
                        </p>
                        <p class="rightOneTable">
                        <p>消防报警</p>
                        <el-table :data="safetyMGTCockpitData.firefightings" style="width: 100%;height:90%;" border>
                            <el-table-column label="序号" fixed type="index" min-width="60" :show-overflow-tooltip="true"
                                align="center" />
                            <el-table-column min-width="80" :show-overflow-tooltip="true" prop="v_Point" label="点位"
                                align="center" />
                            <el-table-column min-width="100" :show-overflow-tooltip="true" prop="d_AlarmTime"
                                label="报警时间" align="center" />
                        </el-table>
                        </p>
                    </div>
                </el-col>
                <el-col class="rightTwo" :span="24">
                    <div class="herderIcon">
                        <span></span>
                        <span>隐患排查治理情况</span>
                        <span></span>
                    </div>
                    <ul class="rightTwoContent" @click="jumpPageTwo('danger')" style="cursor: pointer;">
                        <li>
                            <p class="rightTwoIcon"></p>
                            <div class="rightTwoText">
                                <p class="rightTwoTextName">排查隐患</p>
                                <p>
                                    <span class="num">{{ safetyMGTCockpitData.n_HDHiddenAllCount }}</span>
                                    <span>条</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <p class="rightTwoIcon"></p>
                            <div class="rightTwoText">
                                <p class="rightTwoTextName">未整改隐患</p>
                                <p>
                                    <span class="num">{{ safetyMGTCockpitData.n_HDHiddenUnFinishedCount }}</span>
                                    <span>条</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <p class="rightTwoIcon"></p>
                            <div class="rightTwoText">
                                <p class="rightTwoTextName">整改隐患</p>
                                <p>
                                    <span class="num">{{ safetyMGTCockpitData.n_HDHiddenFinishedCount }}</span>
                                    <span>条</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <p class="rightTwoIcon"></p>
                            <div class="rightTwoText">
                                <p class="rightTwoTextName">隐患</p>
                                <p>
                                    <span class="num">{{ safetyMGTCockpitData.f_HDHiddenFinishePercent }}</span>
                                    <span>%</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </el-col>
                <el-col class="rightThree" :span="24" @click="jumpPageTwo('danger')" style="cursor: pointer;">
                    <div class="herderIcon">
                        <span></span>
                        <span>隐患预警</span>
                        <span></span>
                    </div>
                    <div class="rightThreeContent">
                        <p class="rightTreeLeft">
                            <span>{{ safetyMGTCockpitData.n_HDHiddenWillDueCount }}</span>
                            <span>将到期</span>
                        </p>
                        <p class="rightTreeRight">
                            <span>{{ safetyMGTCockpitData.n_HDHiddenWasDueCount }}</span>
                            <span>已到期</span>
                        </p>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <!-- 视频播放 -->
        <el-dialog v-model="videoPlayerShow" :title="videoOptions.v_Name || '视频'" draggable
            :close-on-click-modal="false" :close-on-press-escape="false" @close="videoPlayerShow = false">
            <VideoPlayer v-if="videoOptions.src" :url="videoOptions.src" :key="videoOptions.myKey" />
        </el-dialog>
    </el-row>
</template>
<style scoped lang="scss">
* {
    list-style: none;
}

.containerSafety {
    position: absolute;
    top: 0;
    left: 0;
    padding-bottom: 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(/@/assets/jsc_images/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;

    .left {
        height: 100%;

        .leftContainer {
            display: flex;
            align-content: space-between;
            height: 100%;

            .leftOne {
                height: 30%;

                .leftOneCard {
                    display: flex;
                    justify-content: space-evenly;
                    align-items: end;
                    height: calc(100% - 30px);

                    .leftOneCardItem {
                        position: relative;
                        width: 26%;
                        height: 80%;
                        background-image: url(/@/assets/jsc_images/icon20.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        i {
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 60px;
                            height: 60px;
                            background-image: url(/@/assets/jsc_images/icon21.png);
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                        }

                        .leftOneCardItemInfo {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-top: 14px;
                            height: 100%;
                            font-size: 14px;

                            span {

                                &:nth-child(2) {
                                    color: rgba(255, 255, 255, 0.4);
                                }

                                &:nth-child(3) {
                                    padding-top: 6px;
                                    font-size: 30px;
                                    color: rgb(255, 79, 31);
                                }
                            }
                        }

                        &:nth-child(2) {
                            i {
                                background-image: url(/@/assets/jsc_images/icon22.png);
                            }

                            .leftOneCardItemInfo {
                                span {
                                    &:nth-child(3) {
                                        color: rgb(255, 187, 0);
                                    }
                                }
                            }
                        }

                        &:nth-child(3) {
                            i {
                                background-image: url(/@/assets/jsc_images/icon23.png);
                            }

                            .leftOneCardItemInfo {
                                span {
                                    &:nth-child(3) {
                                        color: rgb(0, 255, 253);
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .leftTwo {
                height: 38%;

                .leftTwoContent {
                    height: calc(100% - 30px);

                    .leftTwoContentTop {
                        height: 30%;

                        .leftTwoInfo {
                            display: flex;
                            justify-content: space-evenly;
                            align-items: center;
                            height: 70%;

                            li {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: space-evenly;
                                width: 25%;
                                height: 100%;

                                span {
                                    font-size: 12px;

                                    &:nth-child(2) {
                                        font-size: 20px;
                                        color: rgb(0, 255, 253);
                                    }
                                }
                            }
                        }

                        .leftTwoName {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 30%;
                            background-image: url(/@/assets/jsc_images/icon14.png);
                            background-repeat: no-repeat;
                            background-size: 100% 100%;

                            span {
                                color: rgb(0, 255, 253);

                                &:nth-child(1) {
                                    width: 10%;
                                    height: 100%;
                                    background-image: url(/@/assets/jsc_images/icon15.png);
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-size: 40%;
                                }
                            }
                        }
                    }

                    .leftTwoBottom {
                        height: 70%;

                        li {
                            display: flex;
                            height: 25%;
                            width: 100%;

                            .leftTwoRiskIcon {
                                width: 20%;
                                height: 100%;
                                background-image: url(/@/assets/jsc_images/icon16.png);
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 40%;
                            }



                            .leftTwoRiskInfo {
                                width: 80%;

                                .leftTwoRiskInfoName {
                                    display: flex;
                                    justify-content: space-between;
                                    align-content: space-around;
                                    padding-right: 4px;
                                    padding-top: 6px;
                                    height: 76%;

                                    span {
                                        &:nth-child(1) {
                                            font-size: 14px;
                                        }
                                    }

                                    .num {
                                        font-size: 22px;
                                        color: rgb(255, 95, 51);
                                    }
                                }

                                .leftTwoRiskPercent {
                                    height: 24%;
                                }
                            }

                            &:nth-child(2) {
                                .leftTwoRiskIcon {
                                    background-image: url(/@/assets/jsc_images/icon17.png);
                                }

                                .leftTwoRiskInfo {
                                    .leftTwoRiskInfoName {
                                        .num {
                                            color: rgb(255, 187, 0);
                                        }
                                    }
                                }
                            }

                            &:nth-child(3) {
                                .leftTwoRiskIcon {
                                    background-image: url(/@/assets/jsc_images/icon18.png);
                                }

                                .leftTwoRiskInfo {
                                    .leftTwoRiskInfoName {
                                        .num {
                                            color: rgb(255, 242, 0);
                                        }
                                    }
                                }

                            }

                            &:nth-child(4) {
                                .leftTwoRiskIcon {
                                    background-image: url(/@/assets/jsc_images/icon19.png);
                                }

                                .leftTwoRiskInfo {
                                    .leftTwoRiskInfoName {
                                        .num {
                                            color: rgb(0, 255, 253);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                ::v-deep .el-progress__text {
                    display: none;
                }
            }

            .leftThree {
                height: 30%;

                .leftThreeContent {
                    display: flex;
                    justify-content: space-between;
                    height: calc(100% - 30px);

                    .leftThreeStatus {
                        width: 58%;
                        height: 100%;
                        background-image: url(/@/assets/jsc_images/icon12.png);
                        background-repeat: no-repeat;
                        background-size: 100%;

                        ul {
                            padding: 10px;

                            .leftThreeTitle {
                                color: rgb(255, 187, 0);
                                font-size: 16px;
                            }

                            .leftThreeCanter {
                                font-size: 12px;
                                color: rgba(255, 255, 255, 0.6);
                            }

                            .liText {
                                font-size: 12px;
                                color: rgba(255, 255, 255, 0.6);

                                span {
                                    color: rgb(0, 244, 255);
                                }
                            }
                        }
                    }

                    .leftThreePromise {
                        width: 40%;
                        height: 100%;
                        background-image: url(/@/assets/jsc_images/icon13.png);
                        background-repeat: no-repeat;
                        background-size: 100%;

                        ul {
                            padding: 10px;

                            .leftThreeTitle {
                                color: rgb(255, 187, 0);
                                font-size: 16px;
                            }

                            .leftThreePromiseText {
                                font-size: 12px;
                                color: rgba(255, 255, 255, 0.6);
                            }
                        }
                    }
                }
            }
        }
    }

    .middle {
        height: 100%;

        .middleContainer {
            display: flex;
            align-content: space-between;
            height: 100%;

            .middleOne {
                position: relative;
                height: 60%;
                // background-image: url(/@/assets/jsc_images/icon24.png);
                // background-repeat: no-repeat;
                // background-size: 100% 100%;
                overflow: hidden;

                .banTouch {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    height: 100%;
                    background-color: #ffffff00;
                }

                .cameraList {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    justify-content: space-between;
                    padding: 10px;
                    width: 100%;
                    height: 100%;

                    .cameraListItem {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 24%;
                        height: 24%;
                        background-image: url(/@/assets/jsc_images/icon34.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        .image {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            p {
                                position: relative;
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                                background-color: rgba(0, 0, 0, 0.6);

                                i {
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                    width: 50%;
                                    height: 50%;
                                    background-image: url(/@/assets/jsc_images/icon36.png);
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-size: 70%;
                                }
                            }
                        }

                        &:nth-child(1),
                        &:nth-child(2),
                        &:nth-child(3),
                        &:nth-child(4) {
                            .image {
                                width: 100%;
                                height: 100%;
                                background-image: url(/@/assets/jsc_images/icon37.png);
                                background-repeat: no-repeat;
                                background-size: 100%;
                            }
                        }

                        &:nth-child(5),
                        &:nth-child(6),
                        &:nth-child(7),
                        &:nth-child(8) {
                            .image {
                                width: 100%;
                                height: 100%;
                                background-image: url(/@/assets/jsc_images/icon38.png);
                                background-repeat: no-repeat;
                                background-size: 100%;
                            }
                        }

                        &:nth-child(9),
                        &:nth-child(10),
                        &:nth-child(11),
                        &:nth-child(12),
                        &:nth-child(13),
                        &:nth-child(14),
                        &:nth-child(15),
                        &:nth-child(16) {
                            .image {
                                width: 100%;
                                height: 100%;
                                background-image: url(/@/assets/jsc_images/icon39.png);
                                background-repeat: no-repeat;
                                background-size: 100%;
                            }
                        }


                        span {
                            position: relative;
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background-color: rgba(0, 0, 0, 0.6);

                            i {
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                display: block;
                                width: 50%;
                                height: 50%;
                                background-image: url(/@/assets/jsc_images/icon36.png);
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 60%;
                            }
                        }
                    }
                }
            }

            .middleTwo {
                height: 36%;

                .middleTwoContent {
                    display: flex;
                    height: 100%;

                    .middleTwoPlan {
                        width: 50%;

                        .middleTwoPlanContent {
                            display: flex;
                            width: 100%;
                            height: calc(100% - 30px);

                            .middleTwoPlanList {
                                display: flex;
                                flex-direction: column;
                                justify-content: space-evenly;
                                width: 30%;
                                overflow: hidden;
                                cursor: pointer;

                                li {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    width: 96%;
                                    height: 16%;
                                    font-size: 12px;
                                    background-color: rgba(255, 255, 255, 0.06);
                                    border: 1px solid rgba(255, 255, 255, 0.1);
                                    cursor: pointer;

                                }

                                .selectLi {
                                    background-color: rgba(0, 255, 253, 0.2);
                                    border: 1px solid rgb(0, 255, 253);
                                    color: rgb(0, 255, 253);
                                    cursor: pointer;
                                }
                            }

                            .middleTwoPlanInfo {
                                margin: 10px;
                                width: 70%;
                                border: 1px dashed rgba(255, 255, 255, 0.1);
                                // border-radius: 0 50% 50% 0;

                                .middleTwoPlanInfoList {
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: start;
                                    width: 100%;
                                    height: 100%;
                                    overflow: auto;

                                    .middleTwoPlanInfoListItem {
                                        display: flex;
                                        justify-content: space-around;
                                        align-items: center;
                                        margin-bottom: 10px;
                                        height: 30px;
                                        background-color: rgba(255, 255, 255, 0.06);
                                        border: 1px solid rgba(255, 255, 255, 0.1);
                                        cursor: pointer;
                                    }
                                }

                                .middleTwoPlanInfoList::-webkit-scrollbar {
                                    width: 0;
                                    /* Remove scrollbar space */
                                    background: transparent;
                                    /* Optional: just make scrollbar invisible */
                                }
                            }
                        }

                    }

                    .middleTwoStatistics {
                        width: 50%;

                        .middleTwoStatisticsContent {
                            position: relative;
                            width: 100%;
                            height: calc(100% - 30px);

                            .middleTwoStatisticsBg {
                                position: relative;
                                width: 100%;
                                height: 100%;

                                i {
                                    display: block;
                                    width: 100%;
                                    height: 100%;

                                    &:nth-child(1) {
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        transform: translate(-50%, -50%);
                                        background-image: url(/@/assets/jsc_images/icon26.png);
                                        background-repeat: no-repeat;
                                        background-size: 90%;
                                        background-position: center;
                                    }

                                    &:nth-child(2) {
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        transform: translate(-50%, -50%);
                                        background-image: url(/@/assets/jsc_images/icon27.png);
                                        background-repeat: no-repeat;
                                        background-size: 76%;
                                        background-position: center;
                                    }

                                    &:nth-child(3) {
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        transform: translate(-50%, -50%);
                                        background-image: url(/@/assets/jsc_images/icon25.png);
                                        background-repeat: no-repeat;
                                        background-size: 60%;
                                        background-position: center;
                                    }

                                    &:nth-child(4) {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        transform: translate(-50%, -50%);
                                        font-size: 30px;
                                        background-image: url(/@/assets/jsc_images/icon28.png);
                                        background-repeat: no-repeat;
                                        background-size: 40%;
                                        background-position: center;
                                    }
                                }
                            }

                            .middleTwoStatisticsList {
                                display: flex;
                                justify-content: center;
                                align-content: space-between;
                                flex-wrap: wrap;
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                width: 100%;
                                height: 100%;

                                li {
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                    margin: 20px 20px;
                                    width: 14%;
                                    height: 20%;
                                    background-image: url(/@/assets/jsc_images/icon29.png);
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-size: 84%;

                                    span {
                                        font-size: 14px;

                                        &:nth-child(2) {
                                            font-size: 12px;
                                            color: rgba(255, 255, 255, 0.6);
                                        }
                                    }
                                }
                            }

                            .finishingRate {
                                position: absolute;
                                left: 6%;
                                top: 36%;
                                width: 20%;
                                height: 20%;

                                ::v-deep .el-progress-circle {
                                    height: 60px !important;
                                    width: 60px !important;
                                }
                            }

                            .loss {
                                position: absolute;
                                right: 0%;
                                top: 36%;
                                width: 20%;
                                height: 20%;

                                ::v-deep .el-progress-circle {
                                    height: 60px !important;
                                    width: 60px !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .right {
        height: 100%;

        .rightContainer {
            display: flex;
            align-content: space-between;
            height: 100%;

            .rightOne {
                height: 58%;
                overflow: hidden;

                .rightOneContent {
                    display: flex;
                    flex-direction: column;
                    height: calc(100% - 30px);

                    .rightOnePie {
                        height: 40%;
                        width: 100%;
                        overflow: hidden;
                        border: 1px solid rgba(0, 0, 0, 0);
                        // background-color: salmon;
                    }

                    .rightOneNum {
                        height: 20%;

                        ul {
                            display: flex;
                            justify-content: space-between;
                            height: 100%;

                            li {
                                display: flex;
                                justify-content: space-evenly;
                                align-items: center;
                                width: 40%;
                                height: 50%;

                                &:nth-child(1) {
                                    background-image: url(/@/assets/jsc_images/icon10.png);
                                    background-repeat: no-repeat;
                                    background-size: 100% 100%;

                                    span {
                                        &:nth-child(1) {
                                            display: block;
                                            width: 30px;
                                            height: 30px;
                                            background-image: url(/@/assets/jsc_images/icon32.png);
                                            background-repeat: no-repeat;
                                            background-position: center;
                                            background-size: 60%;
                                        }
                                    }
                                }

                                &:nth-child(2) {
                                    background-image: url(/@/assets/jsc_images/icon11.png);
                                    background-repeat: no-repeat;
                                    background-size: 100% 100%;

                                    span {
                                        &:nth-child(1) {
                                            width: 30px;
                                            height: 30px;
                                            display: block;
                                            background-image: url(/@/assets/jsc_images/icon33.png);
                                            background-repeat: no-repeat;
                                            background-position: center;
                                            background-size: 60%;
                                        }
                                    }
                                }
                            }
                        }

                    }

                    .rightOneTable {
                        height: 40%;
                    }
                }
            }

            .rightTwo {
                height: 20%;

                .rightTwoContent {
                    height: calc(100% - 30px);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    align-items: center;

                    li {
                        display: flex;
                        justify-content: space-evenly;
                        height: 44%;
                        width: 40%;
                        background-image: url(/@/assets/jsc_images/icon5.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        &:nth-child(1) {
                            .rightTwoIcon {
                                width: 30%;
                                background-image: url(/@/assets/jsc_images/icon6.png);
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 60%;
                            }

                            .rightTwoText {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                padding-left: 10px;
                                width: 70%;

                                .rightTwoTextName {
                                    font-size: 12px;
                                }

                                .num {
                                    padding-right: 10px;
                                    font-size: 18px;
                                    color: rgb(0, 244, 255);
                                }
                            }
                        }

                        &:nth-child(2) {
                            .rightTwoIcon {
                                width: 30%;
                                background-image: url(/@/assets/jsc_images/icon7.png);
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 60%;
                            }

                            .rightTwoText {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                padding-left: 10px;
                                width: 70%;

                                .rightTwoTextName {
                                    font-size: 12px;
                                }

                                .num {
                                    padding-right: 10px;
                                    font-size: 18px;
                                    color: rgb(0, 244, 255);
                                }
                            }
                        }

                        &:nth-child(3) {
                            .rightTwoIcon {
                                width: 30%;
                                background-image: url(/@/assets/jsc_images/icon8.png);
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 60%;
                            }

                            .rightTwoText {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                padding-left: 10px;
                                width: 70%;

                                .rightTwoTextName {
                                    font-size: 12px;
                                }

                                .num {
                                    padding-right: 10px;
                                    font-size: 18px;
                                    color: rgb(0, 244, 255);
                                }
                            }
                        }

                        &:nth-child(4) {
                            .rightTwoIcon {
                                width: 30%;
                                background-image: url(/@/assets/jsc_images/icon9.png);
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 60%;
                            }

                            .rightTwoText {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                padding-left: 10px;
                                width: 70%;

                                .rightTwoTextName {
                                    font-size: 12px;
                                }

                                .num {
                                    padding-right: 10px;
                                    font-size: 18px;
                                    color: rgb(0, 244, 255);
                                }
                            }
                        }
                    }
                }
            }

            .rightThree {
                height: 20%;

                .rightThreeContent {
                    height: calc(100% - 30px);
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;

                    .rightTreeLeft {
                        width: 40%;
                        height: 80%;
                        background-image: url(/@/assets/jsc_images/icon3.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        span {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            &:nth-child(1) {
                                font-size: 36px;
                                color: rgb(255, 187, 0);
                                height: 60%;
                            }

                            &:nth-child(2) {
                                height: 40%;
                            }
                        }
                    }

                    .rightTreeRight {
                        width: 40%;
                        height: 80%;
                        background-image: url(/@/assets/jsc_images/icon4.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        span {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            &:nth-child(1) {
                                font-size: 36px;
                                color: rgb(255, 95, 51);
                                height: 60%;
                            }

                            &:nth-child(2) {
                                height: 40%;
                            }
                        }
                    }
                }
            }
        }
    }

    //common
    .herderIcon {
        display: flex;
        justify-content: space-evenly;
        height: 30px;
        line-height: 30px;

        span {
            height: 30px;
            line-height: 30px;

            &:nth-child(1) {
                width: 6%;
                background-image: url(/@/assets/jsc_images/icon1.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 50%;
            }

            &:nth-child(2) {
                flex: 1;
                padding-left: 10px;
                text-align: start;
                color: rgb(0, 244, 255);
            }

            &:nth-child(3) {
                margin: auto 0;
                background-image: url(/@/assets/jsc_images/icon2.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                height: 3px;
                width: 60%;
            }
        }
    }

    ::v-deep .el-table {
        padding: 10px 0;
        background-color: hsla(120, 100%, 50%, 0);
        --el-table-border: 1px solid #80808000;
        --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.1) --el-table-tr-bg-color: hsla(120, 100%, 50%, 0);
        --el-table-border-color: #80808000;
        --el-table-header-bg-color: hsla(120, 100%, 50%, 0);

        thead {
            background-color: rgba(255, 95, 51, 0.2);
        }

        tr {
            color: #fff;
            background-color: hsla(120, 100%, 50%, 0);

            td {
                background-color: hsla(120, 100%, 50%, 0);
            }
        }

        th {
            background-color: hsla(120, 100%, 50%, 0);
        }
    }


}
</style>